<script setup>
import { onMounted } from "vue";
import * as THREE from "three";
import * as Cesium from "cesium";
import * as dat from "dat.gui";
import { ImprovedNoise } from "three/addons/math/ImprovedNoise.js";
import TCesium from "@/utils/TCesium.js";
import CloudPrimitive from "../primitives/CloudPrimitive";
import AddVolumePrimitive from "../primitives/VolumePrimitive";

let tCesium;
const loader = new THREE.FileLoader();
THREE.Cache.enabled = true;
loader.setResponseType("json");
function animate() {
  tCesium.renderCesium();
  tCesium.renderThree();
  requestAnimationFrame(animate);
}
// 添加Cesium默认的体积云
function addDefaultClouds(viewer) {
  var clouds = viewer.scene.primitives.add(
    new Cesium.CloudCollection({
      // 控制在预计算的噪波纹理中捕获的细节量 用于渲染积云。为了使纹理可平铺， 这必须是 2 的幂。为获得最佳效果，请将其设置为 2 的幂数 between 和 （含）。8.032.0
      noiseDetail: 8.0,
    })
  );
  //添加云
  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.6908, 45.496, 3000),
    scale: new Cesium.Cartesian2(1500, 250),
    maximumSize: new Cesium.Cartesian3(50, 15, 13),
    slice: 0.3,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.72, 45.5, 3350),
    scale: new Cesium.Cartesian2(1500, 300),
    maximumSize: new Cesium.Cartesian3(50, 12, 15),
    slice: 0.36,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.72, 45.51, 2600),
    scale: new Cesium.Cartesian2(2000, 300),
    maximumSize: new Cesium.Cartesian3(50, 12, 15),
    slice: 0.49,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.705, 45.52, 2500),
    scale: new Cesium.Cartesian2(230, 110),
    maximumSize: new Cesium.Cartesian3(13, 13, 13),
    slice: 0.2,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.71, 45.522, 2700),
    scale: new Cesium.Cartesian2(1700, 300),
    maximumSize: new Cesium.Cartesian3(50, 12, 15),
    slice: 0.6,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.705, 45.525, 2500),
    scale: new Cesium.Cartesian2(230, 110),
    maximumSize: new Cesium.Cartesian3(15, 13, 15),
    slice: 0.35,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.721, 45.53, 2200),
    scale: new Cesium.Cartesian2(1500, 500),
    maximumSize: new Cesium.Cartesian3(30, 20, 17),
    slice: 0.45,
  });
  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.666, 45.5126, 970),
    scale: new Cesium.Cartesian2(400, 150),
    maximumSize: new Cesium.Cartesian3(25, 12, 15),
    slice: 0.36,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.6665, 45.5262, 760),
    scale: new Cesium.Cartesian2(450, 200),
    maximumSize: new Cesium.Cartesian3(25, 14, 12),
    slice: 0.3,
  });
  //设置相机位置及方向
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-122.6515, 45.5252, 3250),
    orientation: {
      heading: Cesium.Math.toRadians(-115),
      pitch: Cesium.Math.toRadians(-12),
      roll: 0.0,
    },
    duration: 0,
  });
}
onMounted(() => {
  tCesium = new TCesium("cesiumContainer", [-180, -90], [180, 90]);
  window.tCesium = tCesium;
  const viewer = tCesium.cesium.viewer;
  viewer.scene.globe.depthTestAgainstTerrain = false;
  animate();

  // 添加全球类云的Primitive
  // const sphere = new Cesium.SphereGeometry({
  //   radius: 6700000.0,
  //   vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
  // });

  // const cloudPrimitive = new Cesium.Primitive({
  //   geometryInstances: new Cesium.GeometryInstance({
  //     geometry: Cesium.SphereGeometry.createGeometry(sphere),
  //     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
  //       Cesium.Cartesian3.ZERO
  //     ),
  //     attributes: {
  //       color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5),
  //     },
  //   }),
  //   appearance: new Cesium.PerInstanceColorAppearance(),
  //   asynchronous: false,
  // });

  // viewer.scene.primitives.add(cloudPrimitive);
  // 添加全球体积云的Primitive
  // const allCloudPrimitive = new CloudPrimitive();
  // viewer.scene.primitives.add(allCloudPrimitive);
  // viewer.trackedEntity = viewer.entities.add({
  //   name: "Yellow box outline",
  //   position: Cesium.Cartesian3.fromDegrees(
  //     124.21936679679918,
  //     45.85136872098397,
  //     80.0
  //   ),
  //   box: {
  //     dimensions: new Cesium.Cartesian3(500, 500, 500),
  //     fill: false,
  //     outline: true,
  //     outlineColor: Cesium.Color.YELLOW,
  //   },
  // });
  // 添加一个可视化体渲染3d云噪声案例
  AddVolumePrimitive(viewer);
  // 添加Cesium默认的体积云
  // addDefaultClouds(viewer);
});
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
